<template>
	<view class="main">
			<view class="value">
			<view class="pulse-rate">
					<view style="height: 50%;"></view>
					<view style="display: flex; flex-direction: column; height: 20%;">
						<text v-if="pulseRate==0">---</text>
						<text v-else>{{pulseRate}}</text>
						<text>脉率</text>
					</view>
			</view>
			<view class="oxygen-saturation">
				<view class="circle">
					<view style="display: flex; flex-direction: column;">
						<text v-if="oxygenSaturation==0" style="{color: '#5484f2'},font-weight:bold">---</text>
						<text v-else :style="{ color: '#f2f2f2' }">{{ oxygenSaturation }}</text>
						<text>血氧饱和度</text>
					</view>
				</view>
			</view>
			<view class="perfusion-index">
					<view style="height: 20%;">
						<text style="font-size: 14rpx; color: aqua;"
					@click="getHistory()">查看历史数据</text></view>
					<view style="height: 50%;"></view>
					<view style="display: flex; flex-direction: column; height: 20%;">
						<text v-if="perfusionIndex==0">---</text>
						<text v-else>{{perfusionIndex}}</text>
						<text>灌注指数(%)</text>
					</view>
			</view>
	</view>
		<view class="graphcial">
			<qiun-data-charts 
			      type="line"
			      :opts="opts"
			      :chartData="myChartData"
			/>
		</view>
	</view>
</template>

<script>
	export default {
		name:"oxygen-testing",
		props:['pulseRate','oxygenSaturation','perfusionIndex','myChartData'],
		data() {
    return {
      chartData: JSON.parse(JSON.stringify(this.myChartData)),
      //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [2,2,2,2],
				height:"20px",
        dataLabel: false,
        dataPointShape: false,
        enableScroll: false,
				update: true,
				duration: 0, // 0
				animation: false,
        legend: {
					show:false
				},
        xAxis: {
          disabled:true
        },
        yAxis: {
          gridType: "dash",
          dashLength: 1,
					disabled:true,
          data: [
            {
              min: 0,
              max: 100
            }
          ]
        },
				fontSize:9,
        extra: {
          line: {
            type: "curve",
            width: 1,
            activeType: "hollow",
            linearType: "custom",
            onShadow: true,
            animation: "horizontal"
          }
        }
      }
    };
  },
  onReady() {
		console.log(this.myChartData)
  },
  methods: {
		getHistory() {
			console.log('click get history')
			uni.navigateTo({
				url:'/pages/oxygen-history/oxygen-history'
			});
		}
  }
};
</script>

<style>
	.main {
		margin-top: 33%;
		display: flex;
		flex-direction: column;
		height: 580rpx;
		width: 88vw;
	}
	.graphcial {
		height: 50vh;
		background-color: tan;
		position: relative;
		overflow: hidden;
	}
	.value {
		height: 50vh;
		display: flex;
		flex-direction: row;
	}
	.column {
		display: flex;
		flex-direction: column;
		align-content: center;
	}
	.pulse-rate {
			position: relative;
			width: 20%;
			font-size: 32rpx;
			background-color: blue;
			text-align: center;
			align-items: center;
	}

.oxygen-saturation {
    width: 60%;
    background-color: green;
    text-align: center;
    position: relative; /* 设置相对定位，以便容纳内部元素的绝对定位 */
		display: flex; /* 使用Flexbox进行布局 */
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
}

.circle {
    width: 60%; /* 圆的直径 */
		background-color: white;
    height: 80%; /* 圆的直径 */
    border-radius: 50%; /* 使其为圆形 */
    display: flex; /* 使用Flexbox进行布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    position: relative; /* 相对定位 */
    overflow: hidden; /* 隐藏溢出的内容 */
		border: 10rpx solid blue; /* 设置边框宽度和颜色 */
}

	.perfusion-index {
			position: relative;
			text-align: center;
			align-items: center;
			font-size: 32rpx;
			width: 20%;
			background-color: red;
			text-align: center;
	}

</style>